<template>
  <el-form ref="formRef" v-loading="loading" :model="formData" :rules="rules" label-width="120" size=""
    style="padding-right: 10px; overflow: auto">
    <el-row justify="start" style="margin-top: 10px">
      <el-col :span="19" :offset="5">
        <el-row justify="start" :gutter="20">
          <el-col :span="8">
            <el-form-item label="班组名称" prop="groupName">
              <el-input v-model="formData.groupName" disabled readonly />
            </el-form-item>
          </el-col>
          <el-col v-if="isManager" :span="8" :offset="0">
            <el-form-item label="岗位类型" prop="postCategory">
              <el-select v-model="formData.postCategory" class="last-select" placeholder="请选择" clearable>
                <el-option v-for="item in projectGropuMemberManageType" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="!isManager" :span="8">
            <el-form-item label="工种" prop="type">
              <el-select v-model="formData.type" class="last-select" placeholder="请选择" clearable>
                <el-option v-for="item in projectGropuMemberTypeWork" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="进场日期" prop="startDate">
              <el-date-picker v-model="formData.startDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                placeholder="选择日期" @change="formData.endDate = undefined" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退场日期" prop="endDate">
              <el-date-picker v-model="formData.endDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                placeholder="选择日期" :disabled-date="disabledEndDate" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工资开卡银行" prop="bankName">
              <el-select v-model="formData.bankName" placeholder="请选择" clearable>
                <el-option v-for="item in bankTypeTypes" :key="item.label" :label="item.label" :value="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工资卡卡号" prop="cardNo">
              <el-input v-model="formData.cardNo" placeholder="请输入工资卡卡号" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { getDicts } from "@/store/modules/dict";
import { ProjectGroupMemberEditForm } from "@/api/worker/types";
import { FormRules } from "element-plus/es/components/form/src/types";
import moment from "moment";

//工资开卡银行
const bankTypeTypes = getDicts("bankTypeTypes");

const loading = ref(false);
const props = defineProps({
  groupId: {
    type: Number,
    default: 0,
  },
  isManager: {
    type: Boolean,
    default: false,
  },
  groupName: {
    type: String,
    default: "",
  },
  corpRole: {
    type: String,
    default: "",
  },
});
const { groupId, groupName, isManager, corpRole } = toRefs(props);

const projectGropuMemberManageType = ref(getDicts("projectGropuMemberManageType"));
const projectGropuMemberTypeWork = ref(getDicts("projectGropuMemberTypeWork"));
if (corpRole.value == "监理") {
  projectGropuMemberManageType.value = projectGropuMemberManageType.value.filter(item => item.value < 1008);
}
else {
  projectGropuMemberManageType.value = projectGropuMemberManageType.value.filter(item => item.value >= 1008);
}

const cacheForm = ref<any>({});
//默认缓存表单的的key

const cacheKey = ref("addWorkerGroupInfo");

const formData = reactive<ProjectGroupMemberEditForm>({
  bankName: "西藏银行股份有限公司",
  groupName: groupName.value,
  startDate: moment().format("YYYY-MM-DD"),
  groupId: groupId.value,
  role: isManager ? 10 : 20
});
const rules = reactive<FormRules<ProjectGroupMemberEditForm>>({
  postCategory: [
    {
      required: true,
      message: "请选择岗位类型",
      trigger: "change",
    },
  ],
  type: [
    {
      required: true,
      message: "请选择工种",
      trigger: "change",
    },
  ],
  startDate: [
    {
      required: true,
      message: "请选择进场日期",
      trigger: "change",
    },
  ],
});
const formRef = ref(ElForm);

//结束时间禁用范围
const disabledEndDate = (time: Date) => {
  if (formData.startDate) {
    return time.getTime() <= new Date(formData.startDate).getTime();
  }
};

//1：新增 2 修改 3 详情(详情不再使用当前页面)
const optionType = ref(1);

onMounted(() => {
  initForm();
});

// 初始化表单
const initForm = (data?: any, type?: number) => {
  if (data) {
    optionType.value = type ?? 2;
    Object.assign(formData, data);
  }
  if (optionType.value == 1) {
    if (isManager) {
      cacheKey.value = "addManagerGroupInfo"
    }
    initCacheForm();
  }
};

//重置缓存表单
const initCacheForm = () => {
  if (optionType.value == 2) return;
  var cacheJson = localStorage.getItem(cacheKey.value);
  if (cacheJson) {
    cacheForm.value = JSON.parse(cacheJson);
  } else {
    if (isManager) {
      cacheForm.value = {
        postCategory: undefined,
        startDate: undefined,
        endDate: undefined,
        bankName: undefined,
      };
    }
    else {
      cacheForm.value = {
        type: undefined,
        startDate: undefined,
        endDate: undefined,
        bankName: undefined,
      };
    }
  }
  Object.assign(formData, cacheForm.value);
};
//更新缓存表单
watchEffect(() => {
  cacheForm.value.postCategory = formData.postCategory;
  cacheForm.value.startDate = formData.startDate;
  cacheForm.value.endDate = formData.endDate;
  cacheForm.value.bankName = formData.bankName;
  cacheForm.value.type = formData.type;

});
//保存需要保存的表单
const saveCacheForm = () => {
  if (optionType.value == 2) return;
  localStorage.setItem(cacheKey.value, JSON.stringify(cacheForm.value));
};

/**
 * 重置表单
 */
const resetForm = () => {
  formRef.value?.resetFields();
  formRef.value?.clearValidate();
  formData.postCategory = cacheForm.value.postCategory;
  formData.startDate = cacheForm.value.startDate;
  formData.endDate = cacheForm.value.endDate;
  formData.bankName = cacheForm.value.bankName;
  formData.type = cacheForm.value.type;
};
/*表单校验*/
const validation = async () => {
  return await formRef.value.validate();
};

defineExpose({
  resetForm,
  validation,
  formData,
  initForm,
  saveCacheForm,
});
</script>

<style scoped>
:deep(.el-form-item) {
  flex-wrap: wrap;
}

:deep(.el-input) {
  width: 100%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-cascader) {
  width: 100%;
}

:deep(.el-input__wrapper) {
  width: 100%;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
</style>
